<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 使用axios需要引入 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>
<body>
    <h1>axios</h1>
    <button id="btn"> 发请求</button>
    <script>
        const oBtn = document.getElementById('btn');
        oBtn.onclick = async function(){ //axios()返回值是一个promise实例，值为一个对象，对象里有我们的配置信息以及响应的数据等，我们只需要拿到这个值，正好await的返回值为成功promise实例的值，所以直接使用async和await函数，因为await必须在async函数里，所以async写在这个函数前面

            //如果请求不成功，没有处理异常，如果await返回失败的promise实例，则直接退出这个函数，async函数返回这个失败的promise，但async不是我们调用的，所以拿不到async的返回值， 所以使用try catch异常处理语句来处理异常
            try{
                const re =await axios({//axios请求接收一个配置对象,下面是常用的,只有url是必须写的
                    url:'/user',//路径
                    method:'get',//请求类型
                    headers:{//是即将被发送的自定义请求头

                    },
                    params:{//是即将与请求一起发送的 URL 参数，必须是一个对象
                        userId:'001'
                    },
                    data:{},//是作为请求主体被发送的数据，只适用于post和put
                    timeout:10000,//指定请求超时的毫秒数(0 表示无超时时间)
                })
                console.log(re)//re就是await拿到的axios成功的值：
                /*- config:是axios请求的时候传入的配置对象
                - data:后端响应的数据
                - headers:响应头
                - request:底层真正使用的xhr实例对象
                - status:响应状态码
                - statusText:响应状态描述*/

                }catch(e){
                    console.log(e.message)
                }
            }
        

    </script>
</body>
</html>